<template>
  <div class="hello">
    <el-container>
      <div >
        <el-header style="height:140px;margin-left:10px;margin-top: 10px">
          <!--头部物语，用户，搜索，投票，切换角色-->
          <blog-header :user="user"></blog-header>
        </el-header>
      </div>
      <div >
        <el-container>
          <div >
            <el-aside style="width:160px;margin-left: 30px">
              <!--侧边导航栏-->
              <blog-sidebar @getArticles="getArticles"></blog-sidebar>
            </el-aside>
          </div>
          <!--文章显示模块-->
          <div >
            <el-main>
              <blog-article :newArticles="e"></blog-article>
            </el-main>
          </div>
        </el-container>
      </div>
        <el-footer>
          <!--友情链接-->
          <blog-foot></blog-foot>
        </el-footer>
    </el-container>
    <div>

    </div>
  </div>
</template>
<script>
  import BlogHeader from "../blog/home/blogHeader";
  import BlogSidebar from "../blog/home/blogSidebar";
  import BlogFoot from "../blog/home/blogFoot";
  import BlogArticle from "../blog/home/blogArticle";

  export default {
    name: 'HelloWorld',
    components: {BlogArticle, BlogHeader, BlogSidebar, BlogFoot},
    data() {
      return {
        user: '',
        e:null,
      }
    },

    methods: {
      getArticles(datas){
        this.e = datas;
      },

      getLoginUser() {
        //处理储存的用户数据
        var logininfo = sessionStorage.getItem("user");
        if (!logininfo) {
          logininfo = localStorage.getItem("user");
        }
        logininfo = JSON.parse(logininfo);
        //写入页面模型层
        this.user = logininfo;
      }
    },

    mounted() {
      this.getLoginUser()
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
